<template>
  <VTable v-bind="tableOptins" class="card-body">
    <template #form="{ form }">
      <select-platform-site
        v-model:platform="form.platform_id"
        v-model:site="form.site"
        :sitemultiple="true"
        platformPlaceholder="推荐平台"
        sitePlaceholder="站点"
      ></select-platform-site>
      <select-personnel
        v-model="form.operations_id"
        placeholder="请选择销售人员"
      ></select-personnel>
      <el-input
        v-model.trim="form.platform_sku"
        class="w-40"
        placeholder="渠道SKU"
        clearable
      ></el-input>
    </template>

    <template #toolbar_btns>
      <div class="flex justify-between w-full spuStyle">SPU: {{ spu }}</div>
    </template>
  </VTable>
</template>

<script setup lang="jsx" name="ChannelSku">
import SelectPlatformSite from "@/components/SelectPlatformSite";

import { reactive } from "vue";
import { getChannelSkuList } from "./api";
const spu = ref("");
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  custom_sku: {
    type: String,
    default: "",
  },
});

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  height: 500,
  rowConfig: {
    height: 60,
  },
  columns: [
    { field: "platform", title: "平台", width: 160 },
    { field: "site", title: "站点", width: 160 },
    { field: "shop_name", title: "店铺", width: 160 },
    {
      field: "status_cn",
      slots: {
        header: () => {
          return (
            <div>
              <div>系统SKU</div>
              <div>自定义SKU</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>{row.goods_sku}</div>
              <div>{row.custom_sku}</div>
            </div>
          );
        },
      },
    },
    {
      field: "status_cn",
      title: "渠道SKU/ASIN",
      slots: {
        header: () => {
          return (
            <div>
              <div>渠道SKU</div>
              <div>ASIN</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>{row.platform_sku}</div>
              <div>{row.asin}</div>
            </div>
          );
        },
      },
    },
    { field: "operations_personnel", title: "销售人员", width: 160 },
    { field: "create_time", title: "上架时间", width: 180 },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page, form }) => {
        let res = await getChannelSkuList({
          ...form,
          custom_sku: props.custom_sku,
          ...page,
        });
        spu.value = res.data?.[0]?.spu;
        return res;
      },
    },
  },
});
</script>

<style lang="scss" scoped>
.card-body {
  padding: 0 !important;
  :deep(.vx-table__form-content) {
    background-image: none;
  }
  :deep(.card-body) {
    border: none !important;
    padding: 0 !important;
  }
}
.spuStyle {
  background: var(--base-bg-color);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 9px;
  margin-bottom: -10px;
}
</style>
